<template>
	<div class="loginMain">
		<div class="login">
			<img class="symbol" src="../assets/symbol.png" alt="">
			<div class="txt">
				<h1>忘忧</h1>
				<h3>一个新兴音乐APP，欢迎大家使用</h3>
			</div>

			<div class="form">

				<div class="frame">
					<div class="submit" @click="submit">登录</div>
				</div>
				<div class="framea">
					<div class="nologin" @click="nologin">立即体验</div>
				</div>
				<div class="title">
					<h4>本软件仅为毕业设计 欢迎大家使用</h4>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		methods: {
			submit(){
				this.$router.push("/login");
			},
			nologin(){
				this.$router.push("/index/recommend");
			}
		},
		created() {
			this.$emit("getnavs-btn", false);
		},
	};
</script>

<style lang="less">
	.loginMain {
		width: 100%;
		height: 100%;
	}

	.login {
		background-color: #0F172A;
		width: 100%;
		height: 100%;
		color: #fff;
		position: absolute;

		.symbol {
			// left: 30%;
			// padding-left: 60px;
			margin: 0 auto;
			top: 10%;
			position: relative;
		}
	}

	.txt {
		// margin: 80px 0 30px 70px;
		// left: 12%;
		text-align: center;
		margin-bottom: 30px;
		margin-top: 80px;

		// position: relative;
		h1 {
			font-size: 34px;
			height: 48px;
			// padding: 100px 0px 0px 46px;
			// width: 76%;
			// margin: auto;
		}

		h3 {
			font-size: 16px;
			color: #94A3B8;
			padding-top: 10px;
			// left: 12%;
			// margin: auto;
			// padding: 20px 0px 10px 46px;
		}
	}



	.form {
		top: 22%;
		margin: 0 auto;
		position: relative;

		.frame {
			width: 86%;
			height: 40px;
			line-height: 30px;
			margin: 0 auto;
			background-color: #243DE2;
			border: 1px solid transparent;
			border-radius: 8px;
			margin-bottom: 12px;
			text-align: center;

			.submit {
				font-size: 15px;
				background-color: #243DE2;
				text-align: center;
				color: #FFFFFF;
				margin-top: 8px;
				border-radius: 15px;
			}
		}

		.framea {
			width: 86%;
			height: 40px;
			line-height: 30px;
			margin: 0 auto;
			background-color: #1E293B;
			border: 1px solid transparent;
			border-radius: 8px;
			margin-bottom: 12px;
			text-align: center;

			.nologin {
				font-size: 15px;
				background-color: #1E293B;
				text-align: center;
				color: #FFFFFF;
				margin-top: 8px;
				border-radius: 15px;
			}
		}
		.title{
			padding-top: 10px;
			text-align: center;
			font-size: 12px;
			h4{
				color: #94A3B8;
			}
		}
	}
</style>
